<template>
  <div class="recommend">
    <p>最新音乐 <img src="../../assets/icon/xiayige.png" class="xiayige"></p>

    <div class="recommend_b">
      <div class="recommend_item" v-for="(item,index) in thelatest" :key="index">
          <span class="recommend_span">
            <img :src="item.picUrl" class="today_left" alt="">
          </span>
        <span class="recommend-wz">
            {{item.name}}
        </span>

      </div>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    name: 'radio',
    data() {
      return {
      };
    },
    computed: {
      ...mapState(['thelatest'])
    },
    created() {
      //api 统一管理
      this.$api.getthelatest({limit:6})
    },
  };
</script>

<style scoped>
  .recommend{
    width: 100vw;
    height: 370px;
  }
  .recommend p{
    width: 100vw;
    height: 40px;
    font-size: 14px;
    font-weight: bold;
    line-height: 40px;
    text-indent: 5px;
    position: relative;
  }
  .recommend_b{
    width: 100vw;
    height: 330px;
  }
  .recommend_item{
    width: 32vw;
    height: 165px;
    float: left;
    margin-left: 1vw;


  }
  .recommend-wz{
    height: 35px;
    display: block;
    font-size: 12px;
    overflow:hidden;
    text-overflow:ellipsis;

  }

  .xiayige{
    display: inline-block;
    width: 14px;
    height: 14px;
    position: absolute;
    top: 14px;
    left:66px;
  }
  .recommend_span{
    display: block;
    width: 32vw;
    height: 130px;
  }
  img {
    width: inherit;
    height: inherit;
    object-fit: contain;
  }


</style>
